<template>
  <div class="bigbox">
    <!-- 头部导航盒子 -->
    <div class="header">
      <div class="littlebox">
        <div class="img"><img src="../../assets/layout/yonghu.png" alt=""></div>
        <div class="right">
          <div>用户</div>
          <div class="top"><span class="bigtext">{{ jibenqingkuang.userSize }}</span><span>(户)</span></div>
        </div>
      </div>
      <div class="littlebox">
        <div class="img"><img src="../../assets/peidian.png" alt=""></div>
        <div class="right">
          <div>配电房</div>
          <div class="top"><span class="bigtext">{{ jibenqingkuang.switchroomSize }}</span><span>(个)</span></div>
        </div>
      </div>
      <div class="littlebox">
        <div class="img"><img src="../../assets/layout/bianyaqi.png" alt=""></div>
        <div class="right">
          <div>变压器</div>
          <div class="top"><span class="bigtext">{{ jibenqingkuang.transformerSize }}</span><span>(台)</span></div>
        </div>
      </div>
      <div class="littlebox">
        <div class="img"><img src="../../assets/rongliang.png" alt=""></div>
        <div class="right">
          <div>总容量</div>
          <div class="top"><span class="bigtext">{{ jibenqingkuang.userCapacity }}</span><span>(kVA)</span></div>
        </div>
      </div>
      <div class="littlebox">
        <div class="img"><img src="../../assets/jiancedian.png" alt=""></div>
        <div class="right">
          <div>监测点</div>
          <div class="top"><span class="bigtext">{{ zhongduan.meterTotal }}</span><span>(个)</span></div>
        </div>
      </div>
      <div class="littlebox">
        <div class="img"><img src="../../assets/fuhe.png" alt=""></div>
        <div class="right">
          <div>当前总负荷</div>
          <div class="top"><span class="bigtext">{{ zongfuhe }}</span><span>(kW)</span></div>
        </div>
      </div>
    </div>
    <!-- 中间盒子 -->
    <div class="bodybox">
      <div class="leftbox">
        <!-- 高德地图 -->
          <Gaodemap :mapmarkerlist="mapmarkerlist"></Gaodemap>
        <!-- 打开抽屉 -->
        <div class="open" @click="drawer=true">
          <i style="color: #fff;line-height: 100px;" class="el-icon-arrow-left"></i>
        </div>
        <!-- 抽屉 -->
        <div>
          <el-drawer
            title=""
            :visible.sync="drawer"
            style="position: absolute"
            :modal="false"
            size="25%"
            :wrapperClosable="false">
            <div class="drawer">
              <div class="colose" @click="drawer=false">
                <i style="color: #fff;line-height: 100px;" class="el-icon-arrow-right"></i>
              </div>
              <div>
                <div>
                  <el-input
                    placeholder="请输入关键字或拼音首字母"
                    suffix-icon="el-icon-search"
                    size="small"
                    v-model="input1">
                  </el-input>
                </div>
                <div class="tree">
                  <el-tree :data="data"
                  ref="tree"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                  :highlight-current="true"
                  ></el-tree>
                </div>
              </div>
            </div>
          </el-drawer>
        </div>
      </div>
      <!-- 采集器以及告警 -->
      <div class="rightbox">
        <!-- 采集情况 -->
        <div class="topbox">
          <div class="title">
            <span class="span"></span>
            <span class="caiji">采集情况</span>
          </div>
          <div class="four">
            <div class="img"><img
               src="../../assets/layout/caiji.png" alt=""></div>
            <div class="text">
              <span style="font-size: 24px;color: #323232;">{{ zhongduan.termTotal+zhongduan.meterTotal }}</span>
              <p style="color: #646464;">采集设备（个）</p>
            </div>
            <div class="text">
              <span style="font-size: 24px;color: #323232;">{{ zhongduan.termOnline +zhongduan.meterOnline}}</span>
              <p style="color: #646464;">在线（个）</p>
            </div>
            <div class="progress" ref="progress">

            </div>
          </div>
        </div>
        <!-- 告警情况 -->
        <div class="buttombox">
          <div class="title">
            <span class="span"></span>
            <span class="caiji">告警情况</span>
          </div>
          <div class="jibgaojin" ref="jibgaojin">
            <div :class="{'red':item.eventLevel==3,'yellow':item.eventLevel==2,'green':item.eventLevel==1}"
            v-for="(item,index) in gaojing" :key="index">
              [{{ item.eventLevel==1?'轻微告警':item.eventLevel==2?'普通告警':'严重告警' }}]
             {{ item.time }}  {{ item.subburo }} {{ item.alarmInfo }} 告警值：{{ item.alarmValue }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部三个盒子 -->
    <div class="footer">
      <!-- 负荷情况 -->
      <div class="little">
          <div class="title">
            <div>
              <span class="span"></span>
              <span class="caiji">负荷趋势</span>
            </div>
            <div >
                <el-radio-group v-model="radio1"  size="mini">
                  <el-radio-button label="日"></el-radio-button>
                  <el-radio-button label="月"></el-radio-button>
                </el-radio-group>
              </div>
          </div>
          <div class="center" v-if="radio1==='月'">
            <span class="texe">当月最高<span class="big">{{ fuhelist.loadCurMonthMax }}</span>kW</span>
            <span class="texe">上月最高<span class="big">{{ fuhelist.loadPreMonthMax }}</span>kW</span>
            <span class="texe"><img style="height: 16px;" src="../../assets/blue.png" align="absmiddle" alt="">当月负荷</span>
            <span class="texe"><img style="height: 16px;" src="../../assets/yellow.png" align="absmiddle" alt="">上月负荷</span>
          </div>
          <div class="center" v-else>
            <span class="texe">今日最高<span class="big">{{ fuhelist.loadCurDayMax }}</span>kW</span>
            <span class="texe">昨日最高<span class="big">{{ fuhelist.loadPreDayMax }}</span>kW</span>
            <span class="texe"><img style="height: 16px;" src="../../assets/blue.png" align="absmiddle" alt="">今日负荷</span>
            <span class="texe"><img style="height: 16px;" src="../../assets/yellow.png" align="absmiddle" alt="">昨日负荷</span>
          </div>
          <div  ref="fuhe" style="height: 250px;"></div>
      </div>
      <!-- 电量情况 -->
      <div class="little">
          <div class="title">
            <div>
              <span class="span"></span>
              <span class="caiji">电量情况</span>
            </div>
          </div>
          <div class="center">
              <span class="texe">本月 <span class="big">{{ yongdianl.epowerCurMonth }}</span>kWh</span>
              <span class="texe">上月 <span class="big">{{ yongdianl.epowerPreMonth }}</span>kWh</span>
            </div>
            <div class="right">
              <span><span class="span"></span>累计</span>
              <span><img style="height: 16px;" src="../../assets//green.png" align="absmiddle" alt=""> 月用</span>
            </div>
            <div ref="qingkuang" style="height: 220px;"></div>
      </div>
      <!-- 电务处理情况 -->
      <div class="little">
         <div class="title">
            <div>
              <span class="span"></span>
              <span class="caiji">电务处理情况</span>
            </div>
          </div>
          <div class="dianwu">
            <span class="span"><img style="height: 16px;" src="../../assets/blue.png" align="absmiddle" alt="">用户报修</span>
            <span class="span"><img style="height: 16px;" src="../../assets/green.png" align="absmiddle" alt="">故障报修</span>
            <span class="span"><img style="height: 16px;" src="../../assets/yellow.png" align="absmiddle" alt="">巡视</span>
          </div>
          <div ref="dianwu" style="height: 240px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Gaodemap from '../../components/GaoDemap.vue'
import mapIcon from '../../assets/icon1.png'
import * as echarts from 'echarts';
import {
  getzhuzhiapi, getjibenapi, getzhongdapi, getgaojingapi, getfuheapi, getyongdianapi
  , getgongdanapi, getzongfuheapi, getcangzhanapi,getloginuserapi,getyonghuxialaapi
} from '../../api/userscreen.js'
export default {
  // name: 'LargeScreenIndex',
  components: {
    Gaodemap
    },
  data() {
    return {
      mapIcon,
      location: {
        lng: 120.1588,
        lat: 30.2742
      },
      zoom: 15,
      addressKeyword: '',
      drawer:false,
      input1:'',
      radio1:'日',
      data:[],
      defaultProps:{
        label: 'bizOrgName'
      },
      jibenqingkuang:{},
      zhongduan:{},
      gaojing:[],
      fuhelist:{},
      yongdianl:{},
      yueleiji:[],
      yuemeiri:[],
      benyuefuhe:[],
      shangyuefuhe:[],
      fuhexaios:['00:00','02:45','05:30','08:15','11:00','13:45','14:30','19:15','22:00'],
      jinfyhelist:[],
      zuorifuhelist:[],
      xunshi:[],
      guzhang:[],
      yonghu:[],
      zongfuhe:'',
      // 百度地
      icon: '',
      mapmarkerlist:[]
    };
  },

  async mounted() {
    const re = await getloginuserapi()
    if (re.data.entity.orgType!=='04') {
      const userinfo=await getzhuzhiapi()
    this.data=userinfo.data.list
    const res=await getcangzhanapi({manageNo:userinfo.data.list[0].bizOrgNo})
    this.mapmarkerlist=res.data.list
    await this.getarrjiekou(this.data[0].bizOrgNo)
    // await this.getarrjiekou('88018931')
    } else {
      const userinfo = await getyonghuxialaapi()
      this.data = userinfo.data.list
      try {
        const res=await getcangzhanapi({manageNo:userinfo.data.list[0].bizOrgNo})
    this.mapmarkerlist=res.data.list
      } catch (error) {
        this.mapmarkerlist=[]
      }
    await this.getarrjiekou(this.data[0].bizOrgNo)
    }
    this.infinitScroll ()
    this.getfuhe()
    this.getdianwu()
    this.getdianliangk()
    this.getnewecharts()
  },
  methods: {
    async handleNodeClick(val){
      const res=await getcangzhanapi({manageNo:val.bizOrgNo})
      this.mapmarkerlist = res.data.list
     await this.getarrjiekou(val.bizOrgNo)
      this.getfuhe()
      this.getdianwu()
      this.getdianliangk()
    },
    async getarrjiekou(id){
      // 公司基本信息
    try {
      const jibenqingkuang= await getjibenapi({buro:id})
    this.jibenqingkuang=jibenqingkuang?.data.entity
    } catch (error) {
      this.jibenqingkuang={}
    }
    try {
      const {data:{entity:{loadCur}}}=await getzongfuheapi({buro:id})
    this.zongfuhe=loadCur
    } catch (error) {
      this.zongfuhe=''
    }
    // const res=await getzongfuheapi({buro:id})
    // console.log(res);
    // console.log(entity);
    // 终端
    try {
      const zhongduan =await getzhongdapi({buro:id})
      this.zhongduan = zhongduan.data.entity
     console.log(this.zhongduan.termOnlineRate);
    } catch (error) {
      this.zhongduan={}
    }
    //  告警
    try {
      const gaojing=await getgaojingapi({buro:id})
     this.gaojing=JSON.parse(gaojing.data.entity.alarmLastDetailArray)
    } catch (error) {
      this.gaojing=[]
    }

    //  负荷情况
    try {
      const fuhelist=await getfuheapi({buro:id})
     this.fuhelist=fuhelist.data.entity
     console.log(JSON.parse(this.fuhelist.loadRateOrderedArray));
    //  this.markers=JSON.parse(this.fuhelist.loadRateOrderedArray)
     this.benyuefuhe=JSON.parse(fuhelist.data.entity.loadCurMonthArray)
     this.shangyuefuhe=JSON.parse(fuhelist.data.entity.loadPreMonthArray)
     const arr=[0,11,22,33,44,55,66,77,88]
     const newarr=JSON.parse(fuhelist.data.entity.loadPreDayArray)
     const newar=JSON.parse(fuhelist.data.entity.loadCurDayArray)
     for (let i = 0; i < newar.length; i++) {
      for(let j = 0; j < arr.length; j++) {
        if(i==arr[j]) {
          this.jinfyhelist.push(newar[i])
          this.zuorifuhelist.push(newarr[i])
        }
      }
     }
    } catch (error) {
      this.fuhelist={}
      this.benyuefuhe=[]
      this.shangyuefuhe=[]
      this.jinfyhelist=[]
      this.zuorifuhelist=[]
      this.markers=[]
    }

    //  用电量
    try {
      const yongdianl=await getyongdianapi({buro:id})
     this.yongdianl=yongdianl.data.entity
     this.yueleiji=JSON.parse(this.yongdianl.epowerTotalMonthArray)
     this.yuemeiri =JSON.parse(this.yongdianl.epowerDayMonthArray)
    } catch (error) {
      this.yueleij=[]
      this.yuemeiri=[]
      this.yongdianl={}
    }

      // 工单处理
      try {
        const gongdan =await getgongdanapi({buro:id})
     gongdan.data.list.forEach(ele =>this.xunshi.push(ele.tourCount) )
      gongdan.data.list.forEach(ele =>this.guzhang.push(ele.gzbxCount) )
      gongdan.data.list.forEach(ele =>this.yonghu.push(ele.yhbxCount) )
      } catch (error) {
        this.xunshi=[]
        this.guzhang=[]
        this.yonghu=[]
      }
    // console.log(5555555555555);
    },
    // 树组件过滤
    // filterNode(value, data) {
    //     if (!value) return true;
    //     return data.label.indexOf(value) !== -1;
    //   },
    // 负荷情况图标
    getfuhe(){
      var chartDom = this.$refs.fuhe
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          title: {
            text: '负荷（KW）',
            top:0,
            textStyle: {
              fontSize:12,
              color:'#333',
              height:15,
              fontWeight:100
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            top:'12%',
            left: '3%',
            right: '4%',
            bottom: '12%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,

            data:this.fuhexaios
          },
          yAxis: [
            {
              type: 'value',
              splitLine: {
                //网格线
                lineStyle: {
                  type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                  color: '#ccc'
                },
                show: true //隐藏或显示
              },
              axisLine:{
              show: true,
              lineStyle: {
            color: '#999',    // 坐标轴线线的颜色
            width: '1',    // 坐标轴线线宽
            type: 'solid',    // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
        }
            },
            }
          ],
          series: [
            {
              name:this.radio1=='日'?'今日负荷': '当月负荷',
              type: 'line',
              data:this.radio1=='日'?this.jinfyhelist: this.benyuefuhe
            },
            {
              name: this.radio1=='日'?'昨日负荷':'上月负荷',
              type: 'line',
              lineStyle:{
                color:'#e7bb39'
              },
                itemStyle: {
                  color:'#e7bb39',
                },

              data:this.radio1=='日'?this.zuorifuhelist: this.shangyuefuhe
            }
          ]
        };

        option && myChart.setOption(option);
        window.addEventListener("resize", () => {
          //图表响应处理
          myChart.resize();
        });
    },
    // 电务处理情况报表
    getdianwu(){
      var chartDom = this.$refs.dianwu
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          tooltip: {
            trigger: 'axis'
          },

          grid: {
            top:'10%',
            left: '3%',
            right: '4%',
            bottom: '%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
          },
          yAxis: {
            type: 'value',
            splitLine: {
              //网格线
              lineStyle: {
                type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                color: '#ccc'
              },
              show: true //隐藏或显示
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999', // 坐标轴线线的颜色
                width: '1', // 坐标轴线线宽
                type: 'solid' // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
              }
            }
          },
          series: [
            {
              name: '用户报修',
              type: 'line',
              data: this.yonghu,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#5470c6'
                    },
                    {
                      offset: 1,
                      color: '#fff'
                    }
                  ])
                }
              }
            },
            {
              name: '故障报修',
              type: 'line',
              data: this.guzhang,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#14ccad'
                    },
                    {
                      offset: 1,
                      color: '#fff'
                    }
                  ])
                }
              }
            },
            {
              name: '巡视',
              type: 'line',
              data: this.xunshi,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#e6b932'
                    },
                    {
                      offset: 1,
                      color: '#fff'
                    }
                  ])
                }
              }
            }
          ]
        };

        option && myChart.setOption(option);
        window.addEventListener("resize", () => {
          //图表响应处理
          myChart.resize();
        });
    },
    getdianliangk(){
      var chartDom = this.$refs.qingkuang
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            top:'8%',
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4','5', '6', '7', '8', '9', '10','11', '12']
          },
          yAxis: {
            type: 'value',
            splitLine: {
              //网格线
              lineStyle: {
                type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                color: '#ccc'
              },
              show: true //隐藏或显示
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999', // 坐标轴线线的颜色
                width: '1', // 坐标轴线线宽
                type: 'solid' // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
              }
            }
          },
          series: [
            {
              name: '累计',
              data: this.yueleiji,
              type: 'bar'
            },
            {
              name: '月用',
              type: 'line',
              lineStyle: {
                color: '#30e9ca'
              },
              itemStyle: {
                color: '#30e9ca'
              },
              data: this.yuemeiri
            }
          ]
        };
        option && myChart.setOption(option);
        window.addEventListener("resize", () => {
          //图表响应处理
          myChart.resize();
        });
    },
    // 测试新款echarts
    getnewecharts() {
      var chartDom = this.$refs.progress
      var myChart = echarts.init(chartDom);
      var option;
      // const total=this.zhongduan.termTotal+this.zhongduan.meterTotal
      // const online= this.zhongduan.termOnline +this.zhongduan.meterOnline
      // var value = this.zhongduan.termOnlineRate?this.zhongduan.termOnlineRate*100:0;
      let value=this.zhongduan.allOnlineRate
      var maxvalue = 100; //进度条最大值
      //指定图标的配置项和数据
      var option = {
        title: {
          text: '在线率',
          left: 'center',
          // bottom:'0'
          top: '53%',
          textStyle: {
            color: 'black',
            fontSize: 16,
            fontWeight:100
          }
        },
        //饼图中间显示文字
        graphic: {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: value + '%', //文字内容
              fill: "#62daad",//文字颜色
            fontSize: 22, //文字字号
            // fontWeight: '600'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            //第一张圆环
            name: '在线率',
            type: 'pie',
            radius: ['75%', '80%'],
            center: ['50%', '50%'],
            // 隐藏指示线
            labelLine: { show: false },
            //隐藏圆环上文字
            label: {
              show: false
            },
            data: [
              //value当前进度 + 颜色
              {
                name: '在线',
                value: value,
                itemStyle: {
                  normal: { color: '#62daad' }
                }
              },
              {
                name: '离线',
                value:value? maxvalue - value:0,
                itemStyle: {
                  normal: { color: '#ededed' }
                }
              }
            ]
          }
        ]
      }

      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
          //图表响应处理
          myChart.resize();
        });
    },
            // 告警列表滚动
            infinitScroll () {
      // 拿到表格挂载后的真实DOM
        // const table = document.getElementById(dom);
        const table = this.$refs.jibgaojin
        // 拿到表格中承载数据的div元素
          const divData = table
        divData.onmouseover = function () {
        clearInterval(t)
        } //鼠标移入，停止滚动
        divData.onmouseout = function () {
                start()
              } //鼠标移出，继续滚动
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动2像素)
        let t
        function start () {
        // 数据少于表格高度停止滚动
        if (divData.clientHeight > divData.scrollHeight) {
          return
          }
        t = setInterval(() => {
        // 元素自增距离顶部1像素
        divData.scrollTop += 2
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop > divData.scrollHeight-1) {
        // 重置table距离顶部距离
          divData.scrollTop = 0
            }
          }, 100)
        }
        start()
    }
  },
  watch:{
    radio1(val){
      console.log(val);
      if(val==='日'){

        this.fuhexaios=['00:00','02:45','05:30','08:15','11:00','13:45','14:30','19:15','22:00']
        this.getfuhe()
      }else if(val==='月'){

        this.fuhexaios=['1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23',
              '24',
              '25',
              '26',
              '27',
              '28',
              '29',
              '30',
              '31']
              this.getfuhe()
      }
    },
    async input1(val) {
        if (val) {
          this.data=this.data.filter(ele=>ele.bizOrgName.indexOf(val)!==-1)
        } else {
          const userinfo=await getzhuzhiapi()
            this.data=userinfo.data.list
        }
      }
  }
};
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.bigbox{
  background-color: #f1f1f1;
  padding: 10px;
  width: 100%;
  .header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .littlebox{
      width: 16.2%;
      height: 100px;
      background-color: #fff;
      padding: 20px;
      display: flex;
      .right{
        font-size: 14px;
        color: #878787;
        margin-left: 20px;
        .top{
          margin-top: 10px;
          .bigtext{
            font-size: 25px;
            color: #000;
          }
        }
      }
    }
  }
  .bodybox{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .leftbox{
      width: 66.5%;
      height: 575px;
      background-color: #fff;
      position: relative;
      .open{
        width: 14px;
        height: 100px;
        background-color: #8c95a8;
        position: absolute;
        right: 0;
        top: 210px;
        border-radius: 10px 0 0 10px;
      }
      .open:hover{
          background-color: #5996ff;
        }
      .drawer{
        width: 100%;
        height: 100%;
        background-color: #ddd;
        padding: 20px 20px 5px 20px;
        position: relative;
        .tree{
          margin-top: 20px;
          height: 495px;
          width: 100%;
          overflow: auto;
          border-radius: 4px;
          background-color: #fff;
        }
        .colose{
          width: 14px;
        height: 100px;
        background-color: #8c95a8;
        position: absolute;
        left: 0;
        top: 210px;
        border-radius: 0px 10px 10px 0px;
        }
        .colose:hover{
          background-color: #5996ff;
        }
      }
    }
    .rightbox{
      height: 575px;
        width: 33%;
      .topbox{
        height: 205px;
        width: 100%;
        background-color: #fff;
        padding: 20px;
        .title{
          height: 30px;
          // padding: 5px;
          .span{
            display: inline-block;
            width: 5px;
            height: 20px;
            background-color: #187cf5;
            border-radius: 3px;
            line-height: 30px;
            margin-right: 15px;
            margin-bottom: -5px;
          }
          .caiji{
            display: inline-block;
          }
        }
        .four{
          margin-top: 20px;
          height: 80%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .text{
            text-align: center;
            line-height: 30px;
            padding-top: 20px;
            p{
              font-size: 14px;
            }
          }
          .img{
            // padding-top: 15px;
          }
          .progress{
            // margin-top: -10px;
            height: 100%;
            width: 35%;
            // position: relative;
            // .ding{
            //   position: absolute;
            //   text-align: center;
            //   font-size: 14px;
            //   left: 25%;
            //   top: 30%;
            //   .color{
            //     font-size: 20px;
            //     color: #62daad;
            //   }
            // }
          }
        }
      }
      .buttombox{
        height: 360px;
        background-color: #fff;
        margin-top: 10px;
        padding: 20px;
        .jibgaojin{
          overflow-x: hidden;
        overflow-y: scroll;
        height: 300px;
        }

        .title{
          height: 30px;
          // padding: 5px;
          .span{
            display: inline-block;
            width: 5px;
            height: 20px;
            background-color: #187cf5;
            border-radius: 3px;
            line-height: 30px;
            margin-right: 15px;
            margin-bottom: -5px;
          }
          .caiji{
            display: inline-block;
          }
        }
        .yellow{
          color: #e66d17;
          font-size: 14px;
          margin-bottom: 10px;
        }
        .red{
          color: red;
          font-size: 14px;
          margin-bottom: 10px;
        }
        .green{
          font-size: 14px;
          margin-bottom: 10px;
          color: #0fbbc7;
        }
      }
    }
  }
  .footer{
    display: flex;
    justify-content: space-between;
    .little{
      width: 33%;
      height: 320px;
      padding: 15px;
      background-color: #fff;
      .dianwu{
        font-size: 12px;
        text-align: right;
        .span{
          margin-right: 15px;
        }
      }
      .title{
          height: 30px;
          // padding: 5px;
          display: flex;
          justify-content: space-between;
          .span{
            display: inline-block;
            width: 5px;
            height: 20px;
            background-color: #187cf5;
            border-radius: 3px;
            line-height: 30px;
            margin-right: 15px;
            margin-bottom: -5px;
          }
          .caiji{
            display: inline-block;
          }
        }
        .center{
          text-align: center;
          font-size: 12px;
          margin: 5px;
          .texe{
            margin-right: 10px;
            .big{
              font-size: 20px;
              color: #ff973b;
            }
          }
        }
        .right{
          text-align: right;
          font-size: 12px;
          .span{
            display: inline-block;
            width: 24px;
            height: 12px;
            background-color: #589dea;
            border-radius: 5px;
            margin-right: 5px;
            margin-bottom: -2px;
          }
        }
    }
  }
}
::v-deep .el-drawer__header{
  display: none;
}
::v-deep .el-progress-circle{
  width: 100px !important;
  height: 100px !important;
}
::v-deep .el-progress__text{
  display: none;
}
.jibgaojin::-webkit-scrollbar {
        display: none;
    }
</style>